<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]-->
    <!--[if IE 9]><meta http-equiv="X-UA-Compatible" content="IE9" /><![endif]-->
    <meta charset="UTF-8" />
    
    <title>jOWE ~ Demo ~ City map generation</title>
    
    <link rel="stylesheet" type="text/css" href="jowe-demo.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jowe-alea.js"></script>
    
    <script type="text/javascript" src="jowe-core.js"></script>
    <script type="text/javascript" src="jowe-city.js"></script>
    <script type="text/javascript" src="jowe-ui.js"></script>
    <script type="text/javascript" src="jowe-demo.js"></script>

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20897630-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

</head>
<!--
********************************************************************************
jOWE - javascript Opensource Word Engine
http://code.google.com/p/jowe/
********************************************************************************

Copyright (c) 2010-2012 Ludovic L.

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

********************************************************************************
Icons used in demo are from : "Silk icon set 1.3" by Mark James
http://www.famfamfam.com/lab/icons/silk/
This work is licensed under a Creative Commons Attribution 2.5 License.
[ http://creativecommons.org/licenses/by/2.5/ ]
Any other questions about this icon set please contact mjames@gmail.com

********************************************************************************

This is the HTML demo file of the jOWE project.

NOTICE:
  I feel sorry for IE users (below version 9), but even with "ExplorerCanvas",
  you won't be able to run this code properly. IE is really slow on displaying map,
  and even after loading, moving takes too much time to be usable.
  Please, update your internet explorer to version 9, or use an html5 compliant
  browser (Chrome, Opera, Firefox, ...).

About jQuery :
  I'm using jQuery to manage the user interface. The whole process can be done with
  another framework. It means that "jowe-core.js" and "jowe-ui.js" don't need it.

Resources about IE9 :
  http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx
-->
<body>

<!--// The toolbar with all the buttons and input text. //-->
<div id="dToolbar">

  <div id="bSeparator00" class="filler"></div>

  <label id="lblMapSeed" class="labelbutton" for="mseed">Seed:</label>
  <button id="pMapSeed"  class="inc1 button bMovePrev"></button>
  <input id="txtMapSeed" class="inputbutton" type="text" value="1000" size="9" maxlength="8" />
  <button id="nMapSeed"  class="inc1 button bMoveNext"></button>
    
  <div id="bSeparator10"  class="filler separator"></div>

  <label id="lblWorldWidth" class="labelbutton" for="txtWorldWidth">Map size:</label>
  <input id="txtWorldWidth" class="inputbutton" type="text" value="80" tabindex="20" />
  <label id="lblWorldHeight" class="labelbutton" for="txtWorldHeight">x</label>
  <input id="txtWorldHeight" class="inputbutton" type="text" value="80" tabindex="30" />

<!-- Temporarly disabled, no code behind...
  <div id="bSeparator10" class="filler separator"></div>

  <label id="lblWorldPitch" class="labelbutton" for="txtWorldPitch">Height:</label>
  <input id="txtWorldPitch" class="inputbutton" type="text" value="8" tabindex="40" />

  <div id="bSeparator15" class="filler"></div>

  <label id="lblWorldRatio" class="labelbutton" for="txtWorldRatio">Noise:</label>
  <input id="txtWorldRatio" class="inputbutton" type="text" value="3.1" tabindex="45" />
  <div id="bSeparator15" class="filler separator"></div>
  
  <input id="chkFertility" class="checkbutton" type="checkbox" tabindex="46" value="true" />
  <label id="lblFertility" class="labelbutton" for="chkFertility">Fertility</label>

  <input id="chkRainfall" class="checkbutton" type="checkbox" tabindex="47" value="true" />
  <label id="lblRainfall" class="labelbutton" for="chkRainfall">Rainfall</label>

  <input id="chkTemperature" class="checkbutton" type="checkbox" tabindex="48" value="true" />
  <label id="lblTemperature" class="labelbutton" for="chkTemperature">Temperature</label>

  <input id="chkPopulation" class="checkbutton" type="checkbox" tabindex="49" value="true" />
  <label id="lblPopulation" class="labelbutton" for="chkPopulation">Population</label>
-->
  <div id="bSeparator20" class="filler separator"></div>
  
  <div id="bCreateWorld" class="button" tabindex="50" title="Create world"></div>
  <div id="bWorldJSON"   class="button bJSONCode" tabindex="51" title="Display JSON"></div>
  
  <div id="bSeparator40" class="filler separator"></div>
  
  <div id="bModeNormal" class="button selected" tabindex="52" title="Display height map"></div>
  <div id="bModeFertility" class="button" tabindex="53" title="Display fertility map"></div>
  <div id="bModeRainfall" class="button" tabindex="54" title="Display rainfall map"></div>
  <div id="bModeTemperature" class="button" tabindex="55" title="Display temperature map"></div>
  <div id="bModePopulation" class="button" tabindex="56" title="Display population map"></div>

  <div id="bSeparator40" class="filler separator"></div>

  <!--//
  <div id="bHexa" class="button" tabindex="57" title="Map with hexagonal tiles"></div>
 
 <div id="bSeparator31" class="separator filler"></div>
  //!-->
  
  <div id="bSeparator30" class="newline"></div>
  <div id="bSeparator31" class="filler"></div>
  
  <div id="bShowGrid" class="button active" tabindex="58"></div>
  <label id="lblGridWidth" class="labelbutton" for="txtGridWidth">Grid:</label>
  <input id="txtGridWidth" class="inputbutton" type="text" value="540" maxlength="4" tabindex="60" />
  <label id="lblGridHeight" class="labelbutton" for="txtGridHeight">x</label>
  <input id="txtGridHeight" class="inputbutton" type="text" value="300" maxlength="4" tabindex="70" />
  <div id="bUpdateGrid" class="button" tabindex="80"></div>
  
  <div id="bSeparator45" class="filler separator"></div>

  <div id="bShowMap" class="button" tabindex="90"></div>
  <label id="lblMapWidth" class="labelbutton" for="txtMapWidth">Map:</label>
  <input id="txtMapWidth" class="inputbutton" type="text" value="100" maxlength="4" tabindex="100" />
  <label id="lblMapHeight" class="labelbutton" for="txtMapHeight">x</label>
  <input id="txtMapHeight" class="inputbutton" type="text" value="100" maxlength="4" tabindex="110" />
  <div id="bUpdateMap" class="button" tabindex="120"></div>
  
  <div id="bSeparator50" class="filler separator"></div>
  
  <div id="bInformation" class="button" tabindex="130" title="Show/Hide information"></div>
  <div id="bShowCursor" class="button" tabindex="135" title="Show/Hide cursor"></div>
  <div id="bWaterDetails" class="button" tabindex="140" title="Show/Hide water details"></div>
  
  <div id="bSeparator60" class="filler"></div>
  
  <div id="bCenter" class="button" tabindex="150"></div>

  <div id="bSeparator65" class="filler"></div>

  <div id="bZoomOut" class="button" tabindex="160" title="Zoom in"></div>
  <div id="bZoomLabel" class="button" title="Current zoom level"><p>2</p></div>
  <div id="bZoomIn" class="button" tabindex="170" title="Zoom out"></div>
  
  <div id="bSeparator99" class="newline"></div>
<!--  
  <div id="bSeparator70" class="separator"></div>
  <div id="bRotateLeft" class="button" tabindex="180"></div>
  <div id="bRotateLabel" class="button">N</div>
  <div id="bRotateRight" class="button" tabindex="190"></div>
//-->
  
</div>

<!--// Display Information about the current map.//-->
<div id="dDisplayInformation" width="100%">
  <div id="dDetailInformation" style="display: none;">
      <div id="dOverallInformation" class="leftinfo">
      Average height : <span id="lblAvgHeight">(N/A)</span><br />
      Average fertility : <span id="lblAvgFertility">(N/A)</span><br />
      Average rainfall : <span id="lblAvgRainfall">(N/A)</span><br />
      Average temperature : <span id="lblAvgTemperature">(N/A)</span><br />
      Population : <span id="lblSumPopulation">(N/A)</span><br />
      </div>
      <div id="dCursorXYZInformation" class="leftinfo">
      X : <span id="lblCursorX">-</span><br />
      Y : <span id="lblCursorY">-</span><br />
      Cell type : <span id="lblCellType">-</span>
      </div>
      <div id="dCursorMapInformation" class="leftinfo">
      Height : <span id="lblCellHeight">-</span><br />
      Fertility : <span id="lblCellFertility">-</span><br />
      Rainfall : <span id="lblCellRainfall">-</span><br />
      Temperature : <span id="lblCellTemperature">-</span><br />
      Population : <span id="lblCellPopulation">-</span>
      </div>
      <div id="dFillerInformation" class="newline">
      </div>
  </div>
</div>

<!--// Canvas for the Map. //-->
<div id="dMap" tabindex="400" style="display: none;">
  <canvas id="cMap" width="0" height="0">
  </canvas>
</div>

<!--// Canvas for the Grid. //-->
<div id="dGrid" tabindex="600">
  <canvas id="cGrid" width="540" height="300">
      <p>I feel sorry for IE users (below version 9), but even with "ExplorerCanvas", you won't be able to run this code properly.<br />
      IE is really slow on displaying map, and even after loading, moving takes too much time to be usable.<br/>
      Below, you may see the toolbar to be used with the Map Object Generator, but all functions are disabled.<br />
      If you really want to have a look (with "<a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a>"),
      you can go to this page : <a href="jowe-demo-ie.html">jowe-demo-ie.html</a><br />
      Be advise that it will take time, and that dragging the grid will be an awfull experience.<br />
      </p>
      <p>I suggest you to use a modern html5 compliant browser like Chrome, Opera, Firefox, ...<br />
      You could also take a look at <a href="http://www.google.com/chromeframe/">Google Chrome Frame</a>.
      It is a free plug-in for Internet Explorer.<br />
      Some advanced web apps use Google Chrome Frame to provide you with additional features and better performance.<br />
      </p>
  </canvas>
</div>

<!--// Online help. //-->
<div id="dHelp" class="info">
  <div id="dCreateWorld"> create a random world with the size entered in the "grid" textboxes (width x height)</div>
  <div id="dShowGrid"> show/hide world grid</div>
  <div id="dShowMap"> show/hide world map</div>
  <div id="dUpdateGrid"> update the canvas size with new values (width x height)</div>
  <div id="dInformation"> show/hide information about current map</div>
  <div id="dShowCursor"> show/hide cursor in grid (that follow the mouse)</div>
  <div id="dWaterDetails"> show/hide water levels detail</div>
  <div id="dCenter"> refresh display to center of the map</div>
  <div id="dZoomIn">zoom in</div>
  <div id="dZoomOut">zoom out</div>
<!--  
  <img align="absmiddle" src="images/arrow_turn_left.png" alt="Turn left" />
  <img align="absmiddle" src="images/arrow_turn_right.png" alt="Turn right" /> turn left/turn right.<br />
//-->

    <p><em><a href="http://code.google.com/p/jowe/">Want to know more ? Have a look on the project page</a></em></p>

</div>

<!--// JSON area. Display current object as a JSON structure. //-->
<div id="tJSON">

</div>

</body>
</html>